<template>
  <div class="user">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>园区管理</el-breadcrumb-item>
          <el-breadcrumb-item>故障报修</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="enterpriseName" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" 
    :summary-method="getInCoRegList" :data="InCoRegList" 
    border style="width: 100%"
    >
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="enterpriseName" label="企业名称">
      </el-table-column>
      <el-table-column prop="name" label="报修联系人">
      </el-table-column>
      <el-table-column prop="repairNumber" label="联系电话">
      </el-table-column>
      <el-table-column prop="address" label="报修地址">
      </el-table-column>
      <el-table-column prop="repairName" label="报修描述">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ?  '未受理': '' }}
            {{ scope.row.status === 1 ?  '已受理': '' }}
            {{ scope.row.status === 2 ?  '已完成': '' }}
            </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-warning" @click="showWarningDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="warning" plain icon="el-icon-check" @click="iwantcomDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑故障报修" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" label-width="120px" :rules="rules" ref="editUserForm">
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="editForm.enterpriseName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="报修联系人" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="repairNumber">
          <el-input v-model="editForm.repairNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="报修地址" prop="address">
          <el-input v-model="editForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="报修描述" prop="repairName">
          <el-input v-model="editForm.repairName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    RepairList,
    iwantRepair,
    editRepair,
    iwantcomRepair,
    deleteRepair
  } from '@/api'
  export default {
    data() {
      return {
        InCoRegList: [],
        enterpriseName:"",
        query: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,
        editDialogFormVisible: false,
        editForm: {
          name: '',
          enterpriseName: '',
          repairNumber: '',
          enterpriseInformationId:"",
          repairId:'',
          address:'',
          repairName:''
        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.initList()
    },
    methods: {
      getInCoRegList(param){
          console.log(param)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        RepairList({
          params: {
            enterpriseName:this.enterpriseName,
            page: this.pagenum-1,
            size : this.pagesize,
            sortField: 'createTime',
            sortType:'dsc'
          }
        }).then(res => {
          console.log(res)
          this.InCoRegList = res.data.content
          this.total = res.data.totalElements
          this.loading = false
        })
      },
      // 改变用户状态
      changeUserState(row) {
        console.log(row)
        changeUserState({
          uid: row.id,
          type: row.mg_state
        }).then(res => {
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: '修改用户状态成功'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
      },
      closeDiaglog(){
        this.$refs['addUserForm'].resetFields()
      },
      // 显示编辑用户对话框
      showEditDialog(row) {
        console.log(row)
        this.editDialogFormVisible = true
        // JSON.parse
        // JSON.stringify
        // getUserById(row.id).then(res => {
        //   if (res.meta.status === 200) {
            this.editForm.name = row.name
            this.editForm.enterpriseName = row.enterpriseName
            this.editForm.repairNumber = row.repairNumber
            this.editForm.enterpriseInformationId = row.enterpriseInformationId
            // var demands = JSON.parse(row.demands)
            // console.log(demands)
            this.editForm.address = row.address
            this.editForm.repairId = row.repairId
            this.editForm.repairName = row.repairName
        //   }
        // })
      },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.editForm)
            editRepair(this.editForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
          }
        })
      },
      // 显示受理对话框
      showWarningDialog(row) {
        console.log(row)
        this.$confirm('是否受理该报修业务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          iwantRepair({
          params: {
            repairId:row.repairId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '受理成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示完成受理对话框
      iwantcomDialog(row) {
        console.log(row)
        this.$confirm('是否已完成该报修业务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          iwantcomRepair({
          params: {
            repairId:row.repairId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '受理成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
       // 显示删除对话框
      showDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteRepair({
          params: {
            repairId:row.repairId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示分配角色对话框
      // showGrantDialog(row) {
      //   this.grantForm = row
      //   this.grantDialogFormVisible = true
      //   getRoleList().then(res => {
      //     console.log(res)
      //     if (res.meta.status === 200) {
      //       this.roleList = res.data
      //     }
      //   })
      // },
      // 分配角色
      // grantUserSubmit() {
      //   if (!this.roleId) {
      //     this.$message({
      //       type: 'warning',
      //       message: '角色不能为空，请选择！'
      //     })
      //   } else {
      //     grantUserRole({
      //       id: this.grantForm.id,
      //       rid: this.roleId
      //     }).then(res => {
      //       if (res.meta.status === 200) {
      //         this.$message({
      //           type: 'success',
      //           message: '设置角色成功'
      //         })
      //         this.grantDialogFormVisible = false
      //       } else {
      //         this.$message({
      //           type: 'error',
      //           message: res.meta.msg
      //         })
      //       }
      //     })
      //   }
      // }
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 300px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }

</style>
